<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <title>商品搜索</title>


    <script type="text/javascript" src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
    <link rel="stylesheet" href="/static/mui/css/mui.min1.css">
    <link rel="stylesheet" href="https://cdn.bootcss.com/weui/1.1.2/style/weui.min.css">
    <script src="https://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/jquery-weui/1.2.0/js/jquery-weui.min.js"></script>
    <script src="/static/js/vue.js"></script>
<style>
    .headTitle {
        position: fixed;
        border: 1px solid #f4f4f4;
        border-top: none;
        border-left: none;
        border-right: none;
        background: #fff;
        width: 100%;
        height: 44px;
        line-height: 44px;
    }
    .head {
        position: absolute;
        width: 100%;
        max-width: 640px;
        right: 0;
        margin: 0 auto;
        height:44px;
        background: rgb(255, 255, 255);
        top: 0;
        left: 0;
        z-index: 3;
    }
    .head .title1 {
        text-align: center;
        font-size: 17px;
        margin: 0 8%;
        font-style: normal;
        font-weight: normal;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        height: 100%;


    }
    .head a img {
        float: left;
        display: block;
        width: 100%;
        width: 10px;
        height: 16px;
        margin-left: 5%;
        margin-top: 14px;
    }
    .workerSearch {
        position: fixed;
        left: 0;
        width: 100%;
        background: #f2f2f2;
    }
    .workerSearch .box {
        max-width: 640px;
        margin: 0 auto;
    }
    .workerSearch .top {
        position: relative;
        background: #fff;
        padding: 1.072rem 0 1.072rem 0;
        border-bottom: 1px solid #E8E8EF;
        overflow: hidden;
    }
    .searchWrap {
        position: relative;
        padding: 0.467rem 5.25rem 0 3.5rem;
        vertical-align: top;
        line-height: 1;
    }
    .searchWrap input {
        width: 100%;
        padding: 0.2rem 1rem 0.2rem 2.143rem;
        line-height: 1.543rem;
        border: 1px solid #D4D4DB;
        border-radius: 0.429rem 0 0 0.429rem;

        font-size: 1rem;
    }
    .searchWrap button {
        position: absolute;
        top: 0.467rem;
        right: 0.858rem;
        width: 3.929rem;
        height: 2.143rem;
        border: none;
        background: #55586D;
        color: #fff;
        border-radius: 0 0.429rem 0.429rem 0;
        font-size: 1rem;
    }
    #img li a img {
        width: 100%;
        height: 130px
    }
</style>
</head>
<body ontouchstart >
<header class="head headTitle" style="text-align: center;position: fixed;top: 0;">
    <a class="back" href="{:url('/home/Goods/goods')}"><img src="/static/images/back_gray.png" alt="返回"></a>
    <span class="" style="margin-right: 8%">商品搜索</span>
    <!--商品搜索-->
            <div class="top" style="background-color: #fff">
                <div class="searchWrap" id="box">
                    <input type="text" id="in" placeholder="请输入商品名称" value="">
                    <button class="chaxun"  style="height: 39px;" type="button" >查询</button>
                </div>
            </div>
</header>
<div id="app">
<!--搜索结果-->
<div id="result" style="margin-top: 105px;position: absolute;text-align: left;width: 100%;height: 100%;overflow: auto;display: block">
    <ul class="mui-table-view mui-grid-view" id="img" style="background-color: rgb(239,239,244)">

        <li id="li" v-for="(item,index) in items"  class="mui-table-view-cell mui-media mui-col-xs-6" :data_id="item.id"
            style="background-color: rgb(239,239,244);padding: 10px 0 0 11px;"  onclick="spxq(this)">
            <a href="#">
                <div style="background-color: #fff;border: 0px solid red;height:235px ">
                    <img v-if="item.thumb=='null'" class="mui-media-object" src="/res/img/thumb.png">
                    <img v-else class="mui-media-object" :src="item.thumb">
                    <div class="mui-media-body" style="">{{item.name}}</div>
                    <div class="mui-media-body " style="color: gray;font-size: 13px">型号：{{item.xinghao}}</div>
                    <div class="mui-media-body " style="color: gray;font-size: 13px">品牌：{{item.pinpai.pinpai}}</div>
                    <div class="mui-media-body" style="color: gray;font-size: 13px;">材质：{{item.caizhi}}</div>
                </div>
            </a></li>
    </ul>
    <div class="weui-loadmore" v-if="is_loading" style="padding-bottom:30px;height:20px;">
        <i class="weui-loading"></i>
        <span class="weui-loadmore__tips">正在加载</span>
    </div>

    <div class="weui-cells__title" v-if="is_none" style="text-align: center;margin-bottom: 20px">无更多数据</div>
</div>
</div>
<script>
    var shuju="";
    <!--滚动加载-->
    var app = new Vue({
        el: '#app',
        data: {
            //初始化
            items: [],
            is_loading: false,
            is_none: false,
            cur_page: 1,
            limit: 10,
        },
    });
    //滚动加载更多
    $('#result').infinite().on('infinite', function () {
        console.log("加载");
        loadlist();
    });
    $(document).on('click','.chaxun', function () {
        shuju=$('#in').val();
        // console.log(shuju);
        app.cur_page=1;
        app.limit=10;
        app.is_loading=false;
        app.is_none=false;
        app.items=[];
        loadlist();
    });

    //ajax加载数据
    function loadlist() {

        if (!app.is_loading&&app.is_none==false) {
            app.is_loading = true;
            app.is_none = false;
            console.log(shuju);
            $.post('search', {page: app.cur_page, limit: app.limit,shuju:shuju}, function (res) {
                console.log(res);
                app.is_loading = false;
                if (res.count > 0) {
                    $('.result').show();
                    if(app.cur_page==1){
                        app.items=res.data;
                    }else {
                        for (var index in res.data) {
                            app.items.push(res.data[index]);
                        }
                    }
                    app.cur_page++;
                }
                else {
                    app.is_loading = false;
                    app.is_none = true;
                    return false;

                }

            });
        }

    }
    <!--商品详情-->
    function spxq(that) {
        console.log("232");
        var id=$(that).attr('data_id');
        var s="spxq/id/"+id;
        location.href=s;
    }
</script>

</body>
</html>